<script setup lang="ts">
import { ref } from 'vue';
import MyTable from './components/MyTable.vue'
export interface Person {
  id: number;
  name: string;
  age: number;
}
const list = ref<Person[]>([
  { id: 1, name: '宫丢丢', age: 17 },
  { id: 2, name: '张丢', age: 18 },
  { id: 3, name: '王大傻逼', age: 19 },
  { id: 4, name: '刘丢丢', age: 20 },
  { id: 5, name: '林丢丢', age: 21 },
  { id: 6, name: '刘丢', age: 22 },
  { id: 7, name: '我嘞个丢', age: 23 },
])
const list2 = ref<Person[]>([
  { id: 8, name: '丢丢宫', age: 17 },
  { id: 9, name: '丢张', age: 18 },
  { id: 10, name: '丢丢王', age: 19 },
  { id: 11, name: '丢丢刘', age: 20 },
  { id: 12, name: '丢丢林', age: 21 },
  { id: 13, name: '丢刘', age: 22 },
])
const deleteItem = (id: number) => {
  list.value = list.value.filter(item => item.id !== id)
}
const deleteItem2 = (id: number) => {
  list2.value = list2.value.filter(item => item.id !== id)
}
</script>

<template>
  <MyTable :data="list"> 
    <template v-slot:default="obj">
      <button @click="deleteItem(obj.id)">删除{{ obj }}</button>
    </template>
    
  </MyTable>
  <!-- 以下为对照组 -->
  <MyTable :data="list2">
    <template v-slot:default="{id}">
      <button @click="deleteItem2(id)">删除{{ id }}</button>
    </template>
  </MyTable>
</template>

<style scoped>
body {
  background-color: #b3b3b3;
}
</style>